<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li class="active"><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0ECMAScript 6入门">ECMAScript 6入门</a><ul><li><a href="#t1安装与解析">安装与解析</a><ul><li><a href="#t2node环境">node环境</a></li><li><a href="#t3浏览器环境">浏览器环境</a></li></ul></li><li><a href="#t4let和const命令">let和const命令</a><ul><li><a href="#t5let命令">let命令</a></li><li><a href="#t6块级作用域">块级作用域</a></li><li><a href="#t7const命令">const命令</a></li><li><a href="#t8跨模块常量">跨模块常量</a></li><li><a href="#t9全局对象的属性">全局对象的属性</a></li></ul></li><li><a href="#t10对象的扩展">对象的扩展</a></li><li><a href="#t11二进制数组">二进制数组</a></li><li><a href="#t12Set和Map数据结构">Set和Map数据结构</a></li><li><a href="#t13Generator函数">Generator函数</a></li><li><a href="#t14Promise对象">Promise对象</a></li><li><a href="#t15异步操作和Async函数">异步操作和Async函数</a></li><li><a href="#t16Class">Class</a></li><li><a href="#t17Decorator">Decorator</a></li><li><a href="#t18Module">Module</a><ul><li><a href="#t19严格模式">严格模式</a></li><li><a href="#t20export命令">export命令</a></li><li><a href="#t21import命令">import命令</a></li><li><a href="#t22模块的整体加载">模块的整体加载</a></li><li><a href="#t23module命令">module命令</a></li><li><a href="#t24export default命令">export default命令</a></li><li><a href="#t25模块的继承">模块的继承</a></li><li><a href="#t26ES6模块的转码">ES6模块的转码</a></li></ul></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 id="t0ECMAScript 6&#x5165;&#x95E8;">ECMAScript 6&#x5165;&#x95E8; <a href="#t0ECMAScript 6&#x5165;&#x95E8;"> # </a></h1>
<blockquote>
<p>&#x6CE8;&#xFF1A;&#x6587;&#x7AE0;&#x5185;&#x5BB9;&#x6765;&#x81EA;&#x962E;&#x4E00;&#x5CF0;&#x7684;&#x300A;ECMAScript 6&#x5165;&#x95E8;&#x300B;</p>
</blockquote>
<p>ECMAScript 6&#xFF08;&#x4EE5;&#x4E0B;&#x7B80;&#x79F0;ES6&#xFF09;&#x662F;JavaScript&#x8BED;&#x8A00;&#x7684;&#x4E0B;&#x4E00;&#x4EE3;&#x6807;&#x51C6;&#xFF0C;&#x5DF2;&#x7ECF;&#x5728;2015&#x5E74;6&#x6708;&#x6B63;&#x5F0F;&#x53D1;&#x5E03;&#x4E86;&#x3002;&#x5B83;&#x7684;&#x76EE;&#x6807;&#xFF0C;&#x662F;&#x4F7F;&#x5F97;JavaScript&#x8BED;&#x8A00;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x7F16;&#x5199;&#x590D;&#x6742;&#x7684;&#x5927;&#x578B;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#xFF0C;&#x6210;&#x4E3A;&#x4F01;&#x4E1A;&#x7EA7;&#x5F00;&#x53D1;&#x8BED;&#x8A00;&#x3002;</p>
<p>&#x6807;&#x51C6;&#x7684;&#x5236;&#x5B9A;&#x8005;&#x6709;&#x8BA1;&#x5212;&#xFF0C;&#x4EE5;&#x540E;&#x6BCF;&#x5E74;&#x53D1;&#x5E03;&#x4E00;&#x6B21;&#x6807;&#x51C6;&#xFF0C;&#x4F7F;&#x7528;&#x5E74;&#x4EFD;&#x4F5C;&#x4E3A;&#x6807;&#x51C6;&#x7684;&#x7248;&#x672C;&#x3002;&#x56E0;&#x4E3A;&#x5F53;&#x524D;&#x7248;&#x672C;&#x7684;ES6&#x662F;&#x5728;2015&#x5E74;&#x53D1;&#x5E03;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x53C8;&#x79F0;ECMAScript 2015&#x3002;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#xFF0C;ES6&#x5C31;&#x662F;ES2015&#xFF0C;&#x4E0B;&#x4E00;&#x5E74;&#x5E94;&#x8BE5;&#x4F1A;&#x53D1;&#x5E03;&#x5C0F;&#x5E45;&#x4FEE;&#x8BA2;&#x7684;ES2016&#x3002;</p>
<h2 id="t1&#x5B89;&#x88C5;&#x4E0E;&#x89E3;&#x6790;">&#x5B89;&#x88C5;&#x4E0E;&#x89E3;&#x6790; <a href="#t1&#x5B89;&#x88C5;&#x4E0E;&#x89E3;&#x6790;"> # </a></h2>
<p>&#x5404;&#x5927;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x6700;&#x65B0;&#x7248;&#x672C;&#xFF0C;&#x5BF9;ES6&#x7684;&#x652F;&#x6301;&#x53EF;&#x4EE5;&#x67E5;&#x770B;kangax.github.io/es5-compat-table/es6/&#x3002;&#x968F;&#x7740;&#x65F6;&#x95F4;&#x7684;&#x63A8;&#x79FB;&#xFF0C;&#x652F;&#x6301;&#x5EA6;&#x5DF2;&#x7ECF;&#x8D8A;&#x6765;&#x8D8A;&#x9AD8;&#x4E86;&#xFF0C;ES6&#x7684;&#x5927;&#x90E8;&#x5206;&#x7279;&#x6027;&#x90FD;&#x5B9E;&#x73B0;&#x4E86;&#x3002;</p>
<h3 id="t2node&#x73AF;&#x5883;">node&#x73AF;&#x5883; <a href="#t2node&#x73AF;&#x5883;"> # </a></h3>
<p>Node.js&#x662F;JavaScript&#x8BED;&#x8A00;&#x7684;&#x670D;&#x52A1;&#x5668;&#x8FD0;&#x884C;&#x73AF;&#x5883;&#xFF0C;&#x5BF9;ES6&#x7684;&#x652F;&#x6301;&#x5EA6;&#x6BD4;&#x6D4F;&#x89C8;&#x5668;&#x66F4;&#x9AD8;&#x3002;&#x901A;&#x8FC7;Node&#xFF0C;&#x53EF;&#x4EE5;&#x4F53;&#x9A8C;&#x66F4;&#x591A;ES6&#x7684;&#x7279;&#x6027;&#x3002;</p>
<p>&#x4F7F;&#x7528;&#x4E0B;&#x9762;&#x7684;&#x547D;&#x4EE4;&#xFF0C;&#x53EF;&#x4EE5;&#x67E5;&#x770B;Node&#x6240;&#x6709;&#x5DF2;&#x7ECF;&#x5B9E;&#x73B0;&#x7684;ES6&#x7279;&#x6027;&#x3002;</p>
<pre><code>$ node --v8-options | grep harmony
</code></pre><h3 id="t3&#x6D4F;&#x89C8;&#x5668;&#x73AF;&#x5883;">&#x6D4F;&#x89C8;&#x5668;&#x73AF;&#x5883; <a href="#t3&#x6D4F;&#x89C8;&#x5668;&#x73AF;&#x5883;"> # </a></h3>
<p>&#x4F7F;&#x7528;&#x7684;ES6&#x8F6C;&#x7801;&#x5668;&#xFF0C;&#x53EF;&#x4EE5;&#x5C06;ES6&#x4EE3;&#x7801;&#x8F6C;&#x4E3A;ES5&#x4EE3;&#x7801;&#xFF0C;&#x4ECE;&#x800C;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x6216;&#x5176;&#x4ED6;&#x73AF;&#x5883;&#x6267;&#x884C;&#x3002;&#x8FD9;&#x610F;&#x5473;&#x7740;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x7528;ES6&#x7684;&#x65B9;&#x5F0F;&#x7F16;&#x5199;&#x7A0B;&#x5E8F;&#xFF0C;&#x53C8;&#x4E0D;&#x7528;&#x62C5;&#x5FC3;&#x73B0;&#x6709;&#x73AF;&#x5883;&#x662F;&#x5426;&#x652F;&#x6301;&#x3002;</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x4EE5;&#x4E0B;&#x5DE5;&#x5177;&#x5C06;es6&#x4EE3;&#x7801;&#x89E3;&#x6790;&#x540E;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x52A0;&#x8F7D;</p>
<ul>
<li>Babel&#x8F6C;&#x7801;&#x5668;</li>
<li>Traceur&#x8F6C;&#x7801;&#x5668;</li>
</ul>
<p>&#x6216;&#x8005;&#x5728;&#x4F60;&#x7684;&#x9875;&#x9762;&#x4E2D;&#x5D4C;&#x5165;&#x89E3;&#x6790;&#x6587;&#x4EF6;&#x8FD0;&#x884C;es6&#x7684;&#x4EE3;&#x7801;&#xFF0C;&#x6BD4;&#x5982;&#x4F7F;&#x7528;babel&#x7684;&#x65F6;&#x5019;</p>
<pre><code>&lt;script src=&quot;node_modules/babel-core/browser.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/babel&quot;&gt;
// Your ES6 code
&lt;/script&gt;
</code></pre><h2 id="t4let&#x548C;const&#x547D;&#x4EE4;">let&#x548C;const&#x547D;&#x4EE4; <a href="#t4let&#x548C;const&#x547D;&#x4EE4;"> # </a></h2>
<h3 id="t5let&#x547D;&#x4EE4;">let&#x547D;&#x4EE4; <a href="#t5let&#x547D;&#x4EE4;"> # </a></h3>
<h3 id="t6&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;">&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF; <a href="#t6&#x5757;&#x7EA7;&#x4F5C;&#x7528;&#x57DF;"> # </a></h3>
<h3 id="t7const&#x547D;&#x4EE4;">const&#x547D;&#x4EE4; <a href="#t7const&#x547D;&#x4EE4;"> # </a></h3>
<h3 id="t8&#x8DE8;&#x6A21;&#x5757;&#x5E38;&#x91CF;">&#x8DE8;&#x6A21;&#x5757;&#x5E38;&#x91CF; <a href="#t8&#x8DE8;&#x6A21;&#x5757;&#x5E38;&#x91CF;"> # </a></h3>
<h3 id="t9&#x5168;&#x5C40;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;">&#x5168;&#x5C40;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027; <a href="#t9&#x5168;&#x5C40;&#x5BF9;&#x8C61;&#x7684;&#x5C5E;&#x6027;"> # </a></h3>
<h2 id="t10&#x5BF9;&#x8C61;&#x7684;&#x6269;&#x5C55;">&#x5BF9;&#x8C61;&#x7684;&#x6269;&#x5C55; <a href="#t10&#x5BF9;&#x8C61;&#x7684;&#x6269;&#x5C55;"> # </a></h2>
<h2 id="t11&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x7EC4;">&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x7EC4; <a href="#t11&#x4E8C;&#x8FDB;&#x5236;&#x6570;&#x7EC4;"> # </a></h2>
<h2 id="t12Set&#x548C;Map&#x6570;&#x636E;&#x7ED3;&#x6784;">Set&#x548C;Map&#x6570;&#x636E;&#x7ED3;&#x6784; <a href="#t12Set&#x548C;Map&#x6570;&#x636E;&#x7ED3;&#x6784;"> # </a></h2>
<h2 id="t13Generator&#x51FD;&#x6570;">Generator&#x51FD;&#x6570; <a href="#t13Generator&#x51FD;&#x6570;"> # </a></h2>
<h2 id="t14Promise&#x5BF9;&#x8C61;">Promise&#x5BF9;&#x8C61; <a href="#t14Promise&#x5BF9;&#x8C61;"> # </a></h2>
<h2 id="t15&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x548C;Async&#x51FD;&#x6570;">&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x548C;Async&#x51FD;&#x6570; <a href="#t15&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x548C;Async&#x51FD;&#x6570;"> # </a></h2>
<h2 id="t16Class">Class <a href="#t16Class"> # </a></h2>
<h2 id="t17Decorator">Decorator <a href="#t17Decorator"> # </a></h2>
<h2 id="t18Module">Module <a href="#t18Module"> # </a></h2>
<h3 id="t19&#x4E25;&#x683C;&#x6A21;&#x5F0F;">&#x4E25;&#x683C;&#x6A21;&#x5F0F; <a href="#t19&#x4E25;&#x683C;&#x6A21;&#x5F0F;"> # </a></h3>
<h3 id="t20export&#x547D;&#x4EE4;">export&#x547D;&#x4EE4; <a href="#t20export&#x547D;&#x4EE4;"> # </a></h3>
<h3 id="t21import&#x547D;&#x4EE4;">import&#x547D;&#x4EE4; <a href="#t21import&#x547D;&#x4EE4;"> # </a></h3>
<h3 id="t22&#x6A21;&#x5757;&#x7684;&#x6574;&#x4F53;&#x52A0;&#x8F7D;">&#x6A21;&#x5757;&#x7684;&#x6574;&#x4F53;&#x52A0;&#x8F7D; <a href="#t22&#x6A21;&#x5757;&#x7684;&#x6574;&#x4F53;&#x52A0;&#x8F7D;"> # </a></h3>
<h3 id="t23module&#x547D;&#x4EE4;">module&#x547D;&#x4EE4; <a href="#t23module&#x547D;&#x4EE4;"> # </a></h3>
<h3 id="t24export default&#x547D;&#x4EE4;">export default&#x547D;&#x4EE4; <a href="#t24export default&#x547D;&#x4EE4;"> # </a></h3>
<h3 id="t25&#x6A21;&#x5757;&#x7684;&#x7EE7;&#x627F;">&#x6A21;&#x5757;&#x7684;&#x7EE7;&#x627F; <a href="#t25&#x6A21;&#x5757;&#x7684;&#x7EE7;&#x627F;"> # </a></h3>
<h3 id="t26ES6&#x6A21;&#x5757;&#x7684;&#x8F6C;&#x7801;">ES6&#x6A21;&#x5757;&#x7684;&#x8F6C;&#x7801; <a href="#t26ES6&#x6A21;&#x5757;&#x7684;&#x8F6C;&#x7801;"> # </a></h3>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
